<template>
  <div class="container">
    <ul class="flex-yc">
      <li class="active">我的关注</li>
      <li>我的粉丝</li>
      <li>黑名单</li>
    </ul>
    <div class="con">
      <black-list v-for="i in 5" :key="i"></black-list>

      <div class="flex-xbt">
        <i></i>
        <el-pagination layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BlackList from '@/pages/member/views/blacklist/components/BlackList.vue'
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;

  ul {
    border-bottom: 1px solid #ededed;

    li {
      padding: 20px;
      font-size: 20px;
      color: #8691a3;
      cursor: pointer;

      &.active,
      &:hover {
        color: $primary;
      }

      & + li {
        margin-left: 30px;
      }
    }
  }

  .con {
    padding: 27px;

    .flex-xbt {
      margin-top: 30px;
    }
  }
}
</style>
